<template>
    <div class="dy-main BringForwardIptSure">
      <div class="dy-header">
        <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">转账确认</x-header>
      </div>
      <div class="dy-body">
        <group gutter=".01rem">
          <cell title="转出账户" :value="requestData.cardNo"></cell>
          <cell title="收款银行" :value="requestData.bankCode"></cell>
          <cell title="收款账户" :value="requestData.payeeNo"></cell>
          <cell title="收款人" :value="requestData.payeeName"></cell>
          <!-- <cell title="转账金额" :value="requestData.tranAmt"></cell>
          <cell title="网点名称" :value="requestData.bankBranch" v-if="requestData.routeFlag === '3'"></cell>
          <cell title="转账方式" :value="requestData.tranMode"></cell> -->
          <popup-picker popup-title="请选择" title="安全验证方式" :data="methodList" v-model="requestData.checkMethod" placeholder="请选择验证方式"></popup-picker>
          <cell title="手机号" :value="requestData.mobile" v-if="requestData.checkMethod[0] === '手机短信验证'"></cell>
          <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
        </group>
        <group v-if="requestData.checkMethod[0] === '身份证验证'">
          <x-input title="身份证" placeholder="请输入身份证后六位" v-model="TestId.Idcard.val" placeholder-align="right" text-align="right"></x-input>
          <x-input title="取款密码" placeholder="请输入取款密码" v-model="TestId.payPwd.val" placeholder-align="right" text-align="right"></x-input>
        </group>
        <group v-if="requestData.checkMethod[0] === '手机短信验证'">
          <zx-smscode v-model="TestPhone.phoneCode.val"></zx-smscode>
          <x-input title="取款密码" placeholder="请输入取款密码" v-model="TestPhone.payPwd.val" placeholder-align="right" text-align="right"></x-input>
        </group>
        <group class="totop" v-if="totop">
          <x-input title="附言" label-width="2.05rem" v-model="textFY" placeholder="转账备注(可不填)" text-align="left" @click.native="getfuyan" right=""><img slot="right-full-height" src="../../assets/img/todown.png" style="width:.24rem;height:.14rem;margin-top:.3rem;"></x-input>
        </group>
        <group class="totop" v-if="todown">
          <x-input title="附言" label-width="2.05rem" v-model="textFY" placeholder="转账备注(可不填)" text-align="left" @click.native="getfuyan1" right=""><img slot="right-full-height" src="../../assets/img/toup.png" style="width:.24rem;height:.14rem;margin-top:.3rem;"></x-input>
        </group>
        <div class="fuyan" style="height:1rem;display:flex;" v-if="fuyan"  @click="gongzi($event)">
          <span style="margin-left:.36rem">{{list.gongzi0}}</span>
          <span>{{list.gongzi1}}</span>
          <span>{{list.gongzi2}}</span>
          <span>{{list.gongzi3}}</span>
          <span>{{list.gongzi4}}</span>
        </div>
        <div class="btn">
          <x-button type="primary" @click.native="toNext(requestData)">确定</x-button>
        </div>
        <div class="warm">
          <p>温馨提示</p>
          <p>1.2016年12月1日起，单卡使用短信验证码日累计不超过5万元；</p>
          <p>2.若您有大于5万元的转账需求，请前往网点申领Key令，或前往网点办理转账。</p>
        </div>
      </div>
    </div>
</template>

<script>
export default{
  data () {
    return {
      list: {
        gongzi0: '工资',
        gongzi1: '还款',
        gongzi2: '房租',
        gongzi3: '生活费',
        gongzi4: '贷款'
      },
      totop: true,
      todown: false,
      textFY: '',
      fuyan: false,
      iconType: ['', '', '', '', ''],
      errormsg: '',
      showPositionValue: false,
      methodList: [['手机短信验证', '身份证验证']],
      requestData: {
        cardNo: '', // 转出卡号
        payeeName: '', // 收款人姓名
        payeeNo: '', // 收款人账号
        tranAmt: '', // 转账金额
        tranMode: '1', // 到账模式
        mobile: '', // 接收短信号码
        payPwd: '', // 取款密码
        checkMethod: ['手机短信验证'], // 验证方式
        Idcard: '' // 身份证
      },
      returnData: {},
      TestPhone: {
        phoneCode: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '验证码不能小于2'}]},
        payPwd: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '取款密码不能小于2'}]}
      },
      TestId: {
        Idcard: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '身份证不能小于2'}]},
        payPwd: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '取款密码不能小于2'}]}
      }
    }
  },
  created () {
    // this.requestData.cardNo = this.$router.query.cardNo
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    getfuyan () {
      this.fuyan = true
      this.totop = false
      this.todown = true
    },
    getfuyan1 () {
      this.fuyan = false
      this.totop = true
      this.todown = false
    },
    gongzi (e) {
      let a = e.target.innerHTML
      console.log(a)
      let b = e.target.nodeName.toLowerCase()
      if (b === 'span') {
        this.textFY = a
      }
    },
    testForm (module) { // 验证跳转
      for (let key in module) {
        let lObj = module[key]
        let lRes = this.$publicFun.formCheck(lObj)
        if (!lRes.isOK) {
          this.errormsg = lRes.msg
          this.showPositionValue = true
          return false
        }
      }
      this.$router.push({name: 'BringForwardIptResult', query: {payeeNo: this.requestData.cardNo, payeeName: this.requestData.payeeName, payeeNu: this.requestData.payeeNo, bankCode: this.requestData.bankCode, tranAmt: this.requestData.tranAmt}})
    },
    toNext: function () {
      if (this.requestData.checkMethod[0] === '手机短信验证') {
        this.testForm(this.TestPhone)
      } else if (this.requestData.checkMethod[0] === '身份证验证') {
        this.testForm(this.TestId)
      }
    },
    getData () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'CI009004', 'basic_Data': {'cardNo': '5556655', 'payeeName': 'hhh', 'payeeNo': '565654', 'tranAmt': '7.7', 'tranMode': '1', 'mobile': '123123124', 'payPwd': '3333', 'checkMethod': ['ffff', 'ddddd']}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            _this.requestData = response.data.data[0]
            this.$router.push({name: 'EAccountApproveFailed'})
          } else {
            console.log('fail')
          }
        })
    },
    regText (msg, type, val, index) {
      // debugger
      let carD = this.iconType.slice()
      if (!this.$publicFun.strIsEmptyOrNull(val)) {
        let lStr = this.$publicFun.stringFilter(val, type)
        lStr.isOK ? carD[index] = 'success' : carD[index] = 'error'
        if (!lStr.isOK) {
          this.errormsg = msg
          this.showPositionValue = true
        }
      } else {
        carD[index] = ''
      }
      this.iconType = carD
    }
  },
  mounted: function () {
    this.requestData.cardNo = this.$route.query.payeeNo
    this.requestData.payeeName = this.$route.query.payeeName
    this.requestData.payeeNo = this.$route.query.payeeNu
    this.requestData.bankCode = this.$route.query.bankCode
    this.requestData.tranAmt = this.$route.query.tranAmt
    this.requestData.mobile = this.$route.query.mobile
  }
}
</script>

<style lang="less">
  .BringForwardIptSure{
    .top{
      img{
        width:.24rem;
        height:.24rem;
      }
    }
    .fuyan {
      background: #fff;
      justify-content: center;
      span{
        width:1.08rem;
        height:0.56rem;
        display: block;
        background:rgba(247,247,247,1);
        border-radius: 0.08rem ;
        margin:.22rem .3rem 0 0;
        text-align: center;
        line-height: .56rem;
      }
    }
    .btn{
      padding: .64rem .3rem;
    }
    .warm{
      width: 100%;
      padding: .36rem .3rem;
      color: #999;
      &>p{
        padding-bottom: .27rem;
      }
    }
  }
</style>
